* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
background: #00A1F1;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

.register-container {
width: 500px;
max-width: 500px;
animation: fadeIn 0.6s ease-out;
height: 600px;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.register-card {
background: white;
border-radius: 24px;
padding: 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}

.logo img {
width: 50px;
height: 50px;
border-radius: 12px;
object-fit: cover;
}

.logo h2 {
font-size: 18px;
color: #1e293b;
line-height: 1.4;
font-weight: 600;
}

h1 {
font-size: 28px;
color: #1e293b;
margin-bottom: 8px;
text-align: center;
font-weight: 700;
}

.subtitle {
color: #64748b;
font-size: 14px;
text-align: center;
margin-bottom: 30px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
color: #475569;
font-weight: 500;
font-size: 14px;
}

.label-with-icon {
display: flex;
align-items: center;
gap: 6px;
}

.label-with-icon i {
color: #3b82f6;
font-size: 14px;
}

.input-wrapper {
position: relative;
display: flex;
align-items: center;
}

.input-wrapper i {
position: absolute;
left: 14px;
color: #94a3b8;
font-size: 18px;
transition: color 0.3s;
}

.input-wrapper .toggle-password {
left: auto;
right: 14px;
cursor: pointer;
z-index: 2;
}

.input-wrapper .toggle-password:hover {
color: #3b82f6;
}

.input-field {
width: 100%;
padding: 14px 45px;
border: 2px solid #eef2f6;
border-radius: 14px;
font-size: 15px;
transition: all 0.3s;
background: #f8fafc;
}

.input-field:focus {
outline: none;
border-color: #3b82f6;
background: white;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.input-field::placeholder {
color: #94a3b8;
font-size: 14px;
}

.admin-code {
background: #f0f9ff;
border: 2px dashed #3b82f6;
}

.admin-code:focus {
border-style: solid;
}

.btn {
width: 100%;
padding: 16px;
background: #3b82f6;
color: white;
border: none;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.btn:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px #3b82f6;
}

.btn:active {
transform: translateY(0);
}

.btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.alert {
padding: 16px 20px;
border-radius: 14px;
margin-bottom: 25px;
font-size: 14px;
display: flex;
align-items: center;
gap: 12px;
animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.alert-error {
background: #fee2e2;
color: #ef4444;
border: 1px solid #fecaca;
}

.alert-success {
background: #dcfce7;
color: #10b981;
border: 1px solid #bbf7d0;
}

.alert i {
font-size: 18px;
}

.login-link {
text-align: center;
margin-top: 25px;
color: #64748b;
font-size: 14px;
}

.login-link a {
color: #3b82f6;
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}

.login-link a:hover {
color: #2563eb;
text-decoration: underline;
}

.password-requirements {
margin-top: 12px;
padding: 16px;
background: #f8fafc;
border-radius: 14px;
border: 1px solid #eef2f6;
}

.requirements-title {
font-size: 13px;
font-weight: 600;
color: #475569;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}

.requirements-list {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.requirements-list li {
font-size: 12px;
color: #64748b;
display: flex;
align-items: center;
gap: 8px;
}

.requirements-list li i {
width: 16px;
font-size: 12px;
}

.requirements-list li.valid i {
color: #10b981;
}

.requirements-list li.invalid i {
color: #ef4444;
}

.strength-meter {
margin-top: 12px;
height: 6px;
background: #eef2f6;
border-radius: 3px;
overflow: hidden;
}

.strength-bar {
height: 100%;
width: 0;
transition: all 0.3s;
border-radius: 3px;
}

.strength-bar.weak {
width: 25%;
background: #ef4444;
}

.strength-bar.medium {
width: 50%;
background: #f59e0b;
}

.strength-bar.strong {
width: 75%;
background: #10b981;
}

.strength-bar.very-strong {
width: 100%;
background: #3b82f6;
}

.strength-text {
font-size: 12px;
margin-top: 6px;
color: #64748b;
}

.match-indicator {
font-size: 12px;
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
}

.match-indicator.match {
color: #10b981;
}

.match-indicator.no-match {
color: #ef4444;
}

.info-box {
margin-top: 25px;
padding: 16px;
background: #f0f9ff;
border-radius: 14px;
border: 1px solid #bae6fd;
}

.info-box p {
color: #0369a1;
font-size: 13px;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 10px;
}

.info-box i {
color: #3b82f6;
font-size: 18px;
margin-top: 2px;
}

.divider {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0;
color: #94a3b8;
font-size: 12px;
}

.divider-line {
flex: 1;
height: 1px;
background: #eef2f6;
}

.countdown-timer {
text-align: center;
margin-top: 15px;
color: #10b981;
font-size: 14px;
font-weight: 500;
animation: pulse 1s infinite;
}

@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}

@media (max-width: 640px) {
.register-card {
padding: 30px 20px;
}

.requirements-list {
grid-template-columns: 1fr;
}

h1 {
font-size: 24px;
}
}